<template>
  <ScaleBox :width="1920" :height="1080" bgc="transparent" :delay="100">
    <div class="w-full h-full flex flex-col bg-white">
      <!-- 标题栏 -->
      <div class="h-12 flex items-center justify-between px-4 border-b-2 border-gray-50 mx-2">
        <div class="flex items-center">
          <el-button class="back-btn" @click="goBack">
            <el-icon><ArrowLeft /></el-icon>
            <span>{{ $t('common.fanhui') }}</span>
          </el-button>
        </div>
        <div class="flex-1 h-[1px] bg-gradient-to-l from-indigo-200 via-indigo-100/50 to-transparent"></div>

        <div class="flex items-center gap-0">
          <div class="flex items-center justify-center w-8 h-8 rounded-lg bg-blue-50">
            <el-icon class="text-xl text-blue-700"><DataLine /></el-icon>
          </div>
          <div class="flex items-center w-full">
            <div class="text-xl font-bold bg-gradient-to-r from-blue-800 to-blue-600 bg-clip-text text-transparent mx-4">
              <!-- {{ $t('generalView.title') }} -->
              {{ $t('summary.incomingMaterials') }}
            </div>
          </div>
        </div>
        <div class="flex-1 h-[1px] bg-gradient-to-l to-indigo-200 via-indigo-100/50 from-transparent"></div>

        <div class="w-20"></div>
      </div>

      <!-- 主要内容区域 -->
      <div class="flex-1 min-h-0 bg-white p-4">
        <div class="w-full h-[calc(50%-0.5rem)] flex mb-1">
          <div class="h-full w-1/3">
            <materials-menu class="shadow-md hover:shadow-sky-500/40"></materials-menu>
          </div>
          <div class="h-full w-1/3 mx-2">
            <week-day-in class="shadow-md hover:shadow-sky-500/40"></week-day-in>
          </div>
          <div class="h-full w-1/3">
            <on-day-in class="shadow-md hover:shadow-sky-500/40"></on-day-in>
          </div>
        </div>
        <div class="w-full h-[calc(50%-0.5rem)] flex">
          <div class="h-full w-1/2 mr-2">
            <forewarning class="shadow-md hover:shadow-sky-500/40"></forewarning>
          </div>
          <div class="h-full w-1/2">
            <packaging-material class="shadow-md hover:shadow-sky-500/40"></packaging-material>
          </div>
        </div>
      </div>
    </div>
  </ScaleBox>
</template>

<script setup>
import '@/style/tailwind.css'
import ScaleBox from 'vue3-scale-box'
import materialsMenu from './components/materialsMenu.vue'
import onDayIn from './components/onDayIn.vue'
import weekDayIn from './components/weekDayIn.vue'
import forewarning from './components/forewarning.vue'
import packagingMaterial from './components/packagingMaterial.vue'
import { ArrowLeft, DataLine } from '@element-plus/icons-vue'
import router from '@/router'

const goBack = () => {
  router.push('/warehouseEntry');
}
</script>

<style scoped lang="scss">
.back-btn {
  background: linear-gradient(to right, #2f6aec, #1e88e5);
  border: none;
  color: white;
  padding: 8px 20px;
  border-radius: 6px;
  font-weight: 500;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 2px 6px rgba(47, 106, 236, 0.2);

  .el-icon {
    font-size: 16px;
    transition: transform 0.3s ease;
  }

  &:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(47, 106, 236, 0.3);
    background: linear-gradient(to right, #3d7af0, #2196f3);

    .el-icon {
      transform: translateX(-4px);
    }
  }
}

@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.text-xl {
  background-size: 200% auto;
  animation: gradient 3s ease infinite;
}
</style>
